<template>
  <view :class="[`${prefixCls}-skeleton-container`]">
    <uv-skeletons :loading="loading" :animate="animate" :skeleton="skeleton">
      <slot />
    </uv-skeletons>
  </view>
</template>

<script>
/**
 * https://www.uvui.cn/components/skeletons.html
 * cu-empty 骨架屏 基于 uv-skeletons
 * @description 该组件用于首页数据加载前显示骨架屏
 * @property {Boolean}			loading		加载状态
 * @property {Boolean}			animate		骨架动画效果
 * @example <cu-skeletons :loading="loading"></cu-skeletons>
 */
export default {
  name: 'cuSkeleton',
  components: {},
  mixins: [],
  props: {
    loading: {
      type: Boolean,
      default: true,
    },
    animate: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      // 预设骨架展示效果(可自定义)
      skeleton: [
        {
          type: 'flex',
          num: 1,
          children: [
            {
              type: 'avatar',
              num: 1,
              style: 'marginRight: 30rpx;',
            },
            {
              type: 'line',
              num: 4,
              style: [null, 'width:360rpx;', 'width:200rpx;'],
            },
          ],
        },
        30,
        {
          type: 'flex',
          children: [
            {
              type: 'custom',
              style: 'width:98rpx;height:160rpx;',
            },
            {
              type: 'custom',
              style: 'width:98rpx;height:160rpx;marginLeft:50rpx;',
            },
            {
              type: 'custom',
              style: 'width:98rpx;height:160rpx;marginLeft:50rpx;',
            },
            {
              type: 'custom',
              style: 'width:98rpx;height:160rpx;marginLeft:50rpx;',
            },
            {
              type: 'custom',
              style: 'width:98rpx;height:160rpx;marginLeft:50rpx;',
            },
          ],
        },
        30,
        {
          type: 'flex',
          children: [
            {
              type: 'line',
              num: 4,
              gap: '30rpx',
              style: ['marginLeft:100rpx;'],
            },
            {
              type: 'custom',
              style: 'width:160rpx;height:160rpx;marginLeft: 30rpx;',
            },
          ],
        },
        30,
        {
          type: 'flex',
          style: 'justifyContent:space-between;',
          children: [
            {
              type: 'custom',
              style: 'width:200rpx;height:260rpx;',
            },
            {
              type: 'custom',
              style: 'width:200rpx;height:260rpx;',
            },
            {
              type: 'custom',
              style: 'width:200rpx;height:260rpx;',
            },
          ],
        },
        30,
        {
          type: 'flex',
          children: [
            {
              type: 'line',
              num: 4,
              gap: '30rpx',
              style: ['width: 200rpx; height:40rpx', 'width: 400rpx; height:40rpx', 'width: 550rpx; height:40rpx'],
            },
          ],
        },
        30,
        {
          type: 'flex',
          style: 'justifyContent:space-between;',
          children: [
            {
              type: 'custom',
              style: 'width:150rpx;height:150rpx;',
            },
            {
              type: 'custom',
              style: 'width:150rpx;height:150rpx;',
            },
            {
              type: 'custom',
              style: 'width:150rpx;height:150rpx;',
            },
            {
              type: 'custom',
              style: 'width:150rpx;height:150rpx;',
            },
          ],
        },
      ],
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {},
}
</script>

<style lang="scss" scoped>
.#{prefixCls('skeleton-container')} {
  position: relative;
  padding: 40rpx 30rpx 120rpx;
}
</style>
